<template>
  <view class="news-card" :class="{'top-card': isTop, 'search-card': hasSearch}">
    <!-- 置顶标签 -->
    <view class="top-tag" v-if="isTop">置顶</view>
    <!-- 新闻标题 -->
    <view class="news-title">{{ title }}</view>
    <!-- 来源&评论（非搜索卡片） -->
    <view class="news-meta" v-if="!hasSearch">
      {{ source }} {{ comment }}
    </view>
    <!-- 搜索标签栏（搜索卡片） -->
    <view class="search-tags" v-if="hasSearch">
      搜索：
      <view class="tag" v-for="(tag, idx) in tags" :key="idx">{{ tag }}</view>
    </view>
    <!-- 时间 -->
    <view class="news-time">{{ time }}</view>
  </view>
</template>

<script>
export default {
  name: "NewsCard",
  props: {
    title: { type: String, required: true },
    source: { type: String, default: "" },
    comment: { type: String, default: "" },
    time: { type: String, required: true },
    isTop: { type: Boolean, default: false },
    hasSearch: { type: Boolean, default: false },
    tags: { type: Array, default: () => [] }
  }
};
</script>

<style scoped>
.news-card {
  background-color: #e6f7ff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 10rpx;
  position: relative;
}
.top-card .top-tag {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 24rpx;
  padding: 2rpx 8rpx;
  border-radius: 4rpx;
}
.search-card .search-tags {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #666;
}
.search-card .tag {
  display: inline-block;
  background-color: #fff;
  padding: 2rpx 10rpx;
  border-radius: 8rpx;
  margin-right: 6rpx;
}
.news-title {
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 10rpx;
  line-height: 1.5;
}
.news-meta {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}
.news-time {
  font-size: 26rpx;
  color: #999;
  text-align: right;
}
</style>